<!-- src/components/TaskList.vue -->
<template>
  <div class="task-list">
    <h3>任务列表</h3>
    <form @submit.prevent="createTask">
      <input v-model="newTask" placeholder="新任务" required />
      <button type="submit">添加</button>
    </form>

    <ul>
      <li v-for="task in tasks" :key="task.id">
        <span>{{ task.name }}</span>
        <button @click="removeTask(task.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getTasks, addTask, deleteTask } from '../utils/api.js'

const tasks = ref([])
const newTask = ref('')

const loadTasks = async () => {
  const res = await getTasks()
  tasks.value = res.data.tasks || []
}

const createTask = async () => {
  await addTask({ name: newTask.value })
  newTask.value = ''
  loadTasks()
}

const removeTask = async (id) => {
  await deleteTask(id)
  loadTasks()
}

onMounted(loadTasks)
</script>

<style scoped>
.task-list {
  max-width: 500px;
  margin: auto;
}
</style>
